<template>
  <div class="payment-modal">
    <div class="modal-content">
      <!-- 标题蓝色边框 -->
      <h2 class="modal-title">应用上架服务费</h2>
      
      <div class="amount-box">
        <span class="label">应付金额：</span>
        <span class="value">¥ {{ amount }}</span>
      </div>

      <div class="payment-methods">
        <label 
          v-for="method in methods"
          :key="method.id"
          class="method-item"
        >
          <input 
            type="radio" 
            v-model="selectedMethod"
            :value="method.id"
          />
          <deepin-icon :name="method.icon" size="20"/>
          {{ method.name }}
        </label>
      </div>

      <button 
        class="confirm-btn"
        @click="handlePayment"
      >
        立即支付
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  amount: {
    type: Number,
    default: 99.00
  }
})

const methods = ref([
  { id: 'alipay', name: '支付宝', icon: 'smartphone' },
  { id: 'wechat', name: '微信支付', icon: 'message-square' }
])

const selectedMethod = ref('alipay')
</script>

<style scoped>
.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  padding: 24px;
  border-radius: 8px;
  width: 400px;
}

.modal-title {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
  padding-bottom: 12px;
}

.method-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e8e8e8;
  margin: 8px 0;
  border-radius: 4px;
  cursor: pointer;
}

.method-item:hover {
  border-color: #1890ff;
}

.confirm-btn {
  background: #1890ff;
  color: white;
  padding: 8px 24px;
  border-radius: 4px;
  margin-top: 16px;
}
</style>